<template>
  <div class="appointment-container">
    <div class="appointment-header">
      <h2>服务预约</h2>
      <p class="service-title">{{ service.title }}</p>
    </div>

    <div class="appointment-content">
      <el-form :model="appointmentForm" :rules="rules" ref="appointmentForm" label-width="100px">
        <!-- 预约时间选择 -->
        <el-form-item label="预约日期" prop="date">
          <el-date-picker
            v-model="appointmentForm.date"
            type="date"
            placeholder="选择日期"
            :picker-options="datePickerOptions"
            style="width: 100%"
          />
        </el-form-item>

        <el-form-item label="预约时段" prop="timeSlot">
          <el-select v-model="appointmentForm.timeSlot" placeholder="选择时段" style="width: 100%">
            <el-option
              v-for="slot in availableTimeSlots"
              :key="slot.value"
              :label="slot.label"
              :value="slot.value"
              :disabled="slot.disabled"
            />
          </el-select>
        </el-form-item>

        <!-- 宠物信息 -->
        <el-form-item label="宠物类型" prop="petType">
          <el-select v-model="appointmentForm.petType" placeholder="选择宠物类型" style="width: 100%">
            <el-option label="狗狗" value="dog" />
            <el-option label="猫咪" value="cat" />
            <el-option label="其他" value="other" />
          </el-select>
        </el-form-item>

        <el-form-item label="宠物品种" prop="petBreed">
          <el-input v-model="appointmentForm.petBreed" placeholder="请输入宠物品种" />
        </el-form-item>

        <el-form-item label="宠物年龄" prop="petAge">
          <el-input-number v-model="appointmentForm.petAge" :min="0" :max="30" />
          <span class="unit">岁</span>
        </el-form-item>

        <el-form-item label="宠物体重" prop="petWeight">
          <el-input-number v-model="appointmentForm.petWeight" :min="0" :max="100" :precision="1" />
          <span class="unit">kg</span>
        </el-form-item>

        <!-- 特殊要求 -->
        <el-form-item label="特殊要求" prop="specialRequirements">
          <el-input
            type="textarea"
            v-model="appointmentForm.specialRequirements"
            :rows="4"
            placeholder="请输入特殊要求或注意事项"
          />
        </el-form-item>

        <!-- 联系人信息 -->
        <el-form-item label="联系人" prop="contactName">
          <el-input v-model="appointmentForm.contactName" placeholder="请输入联系人姓名" />
        </el-form-item>

        <el-form-item label="联系电话" prop="contactPhone">
          <el-input v-model="appointmentForm.contactPhone" placeholder="请输入联系电话" />
        </el-form-item>

        <!-- 服务地点 -->
        <el-form-item label="服务地点" prop="location">
          <el-radio-group v-model="appointmentForm.location">
            <el-radio label="shop">到店服务</el-radio>
            <el-radio label="home">上门服务</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item v-if="appointmentForm.location === 'home'" label="详细地址" prop="address">
          <el-input
            type="textarea"
            v-model="appointmentForm.address"
            :rows="2"
            placeholder="请输入详细地址"
          />
        </el-form-item>

        <!-- 预约确认 -->
        <div class="appointment-summary">
          <h3>预约信息确认</h3>
          <div class="summary-content">
            <div class="summary-item">
              <span class="label">服务项目：</span>
              <span class="value">{{ service.title }}</span>
            </div>
            <div class="summary-item">
              <span class="label">服务价格：</span>
              <span class="value price">¥{{ service.price }}</span>
            </div>
            <div class="summary-item">
              <span class="label">预约时间：</span>
              <span class="value">{{ appointmentForm.date }} {{ appointmentForm.timeSlot }}</span>
            </div>
            <div class="summary-item">
              <span class="label">服务地点：</span>
              <span class="value">{{ appointmentForm.location === 'shop' ? '到店服务' : '上门服务' }}</span>
            </div>
          </div>
        </div>

        <!-- 提交按钮 -->
        <el-form-item>
          <el-button type="primary" @click="submitAppointment" :loading="submitting">
            确认预约
          </el-button>
          <el-button @click="goBack">返回</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AppointmentPage',
  data() {
    return {
      submitting: false,
      service: {
        id: 1,
        title: '专业宠物美容套餐',
        price: 199
      },
      appointmentForm: {
        date: '',
        timeSlot: '',
        petType: '',
        petBreed: '',
        petAge: 1,
        petWeight: 5,
        specialRequirements: '',
        contactName: '',
        contactPhone: '',
        location: 'shop',
        address: ''
      },
      rules: {
        date: [
          { required: true, message: '请选择预约日期', trigger: 'change' }
        ],
        timeSlot: [
          { required: true, message: '请选择预约时段', trigger: 'change' }
        ],
        petType: [
          { required: true, message: '请选择宠物类型', trigger: 'change' }
        ],
        petBreed: [
          { required: true, message: '请输入宠物品种', trigger: 'blur' }
        ],
        petAge: [
          { required: true, message: '请输入宠物年龄', trigger: 'blur' }
        ],
        petWeight: [
          { required: true, message: '请输入宠物体重', trigger: 'blur' }
        ],
        contactName: [
          { required: true, message: '请输入联系人姓名', trigger: 'blur' }
        ],
        contactPhone: [
          { required: true, message: '请输入联系电话', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
        ],
        location: [
          { required: true, message: '请选择服务地点', trigger: 'change' }
        ],
        address: [
          { required: true, message: '请输入详细地址', trigger: 'blur' }
        ]
      },
      datePickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7
        }
      },
      availableTimeSlots: [
        { label: '09:00-10:00', value: '09:00-10:00' },
        { label: '10:00-11:00', value: '10:00-11:00' },
        { label: '11:00-12:00', value: '11:00-12:00' },
        { label: '14:00-15:00', value: '14:00-15:00' },
        { label: '15:00-16:00', value: '15:00-16:00' },
        { label: '16:00-17:00', value: '16:00-17:00' }
      ]
    }
  },
  methods: {
    submitAppointment() {
      this.$refs.appointmentForm.validate((valid) => {
        if (valid) {
          this.submitting = true
          // 这里添加预约提交逻辑
          setTimeout(() => {
            this.submitting = false
            this.$message.success('预约成功')
            this.$router.push(`/payment/${this.service.id}`)
          }, 1500)
        } else {
          return false
        }
      })
    },
    goBack() {
      this.$router.back()
    }
  }
}
</script>

<style scoped>
.appointment-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.appointment-header {
  text-align: center;
  margin-bottom: 40px;
}

.appointment-header h2 {
  font-size: 28px;
  color: #333;
  margin-bottom: 10px;
}

.service-title {
  color: #666;
  font-size: 16px;
}

.appointment-content {
  background: white;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.unit {
  margin-left: 10px;
  color: #666;
}

.appointment-summary {
  margin: 30px 0;
  padding: 20px;
  background: #f9f9f9;
  border-radius: 8px;
}

.appointment-summary h3 {
  margin-bottom: 20px;
  color: #333;
}

.summary-content {
  display: grid;
  gap: 15px;
}

.summary-item {
  display: flex;
  align-items: center;
}

.summary-item .label {
  width: 100px;
  color: #666;
}

.summary-item .value {
  color: #333;
}

.summary-item .price {
  color: #f56c6c;
  font-weight: bold;
}

.el-form-item:last-child {
  margin-bottom: 0;
  text-align: center;
}

.el-button {
  min-width: 120px;
}
</style> 